<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        text-align: center;
        /*border: 1px solid gold; */
        color: rgb(78, 117, 181);
        border: 1px solid rgb(0, 0, 131);
        background-color: rgb(255, 255, 255);
      }
      td {
        width: 70px;
        height: 50px;
        color: rgb(78, 117, 181);
        border: 1px solid rgb(0, 0, 131);
        background-color: rgb(255, 255, 255);
      }
      input {
        width: 310px;
        height: 50px;
        border: none;
        outline: none;
        color: rgb(78, 117, 181);
        text-align: center;
        font-size: 45px;
      }
      button {
        font-size: 40px;
        width: 315px;
        height: 50px;
        color: rgb(78, 117, 181);
      }
      select {
        text-align: center;
        font-size: 40px;
        width: 310px;
        height: 50px;
        color: rgb(78, 117, 181);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>第一个数</td>
        <td colspan="3"><input type="text" class="inp1" /></td>
      </tr>
      <tr>
        <td>运算符</td>
        <td colspan="3">
          <select name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>第二个数</td>
        <td colspan="3"><input type="text" class="inp2" /></td>
      </tr>
      <tr>
        <td>进行计算</td>
        <td colspan="3"><button class="btn">=</button></td>
      </tr>
      <tr>
        <td>运算结果</td>
        <td colspan="3"><input type="text" class="inp3" /></td>
      </tr>
    </table>
    <script>
      let inp1 = document.querySelector(".inp1");
      let liebiao = document.querySelector("select");
      let inp2 = document.querySelector(".inp2");
      let inp3 = document.querySelector(".inp3");
      let btn = document.querySelector(".btn");
      btn.onclick = function () {
        if (inp1.value.trim() === "" || inp2.value.trim() === "") {
          alert("请输入内容");
          return;
        }
        if (isNaN(inp1.value) || isNaN(inp2.value)) {
          alert("请输入数字格式内容");
          return;
        }
        if (liebiao.value === "+") {
          inp3.value = inp1.value * 1 + inp2.value * 1;
          console.log(inp3.value);
        } else if (liebiao.value === "-") {
          inp3.value = inp1.value * 1 - inp2.value * 1;
        } else if (liebiao.value === "*") {
          inp3.value = inp1.value * 1 * inp2.value * 1;
        } else if (liebiao.value === "/") {
          inp3.value = (inp1.value * 1) / (inp2.value * 1);
        }
      };
    </script>
  </body>
</html>
